<template>
	<view class="member-analyse">
		<v-gap />
		
		<view class="module1">
			<van-row class="data-stat" :gutter="16">
				<van-col :span="8">
					<view class="box flex-center flex-column">
						<view class="value">50000</view>
						<view class="label">总会员</view>
					</view>
				</van-col>
				<van-col :span="8">
					<view class="box flex-center flex-column">
						<view class="value">30000</view>
						<view class="label">潜在用户</view>
					</view>
				</van-col>
				<van-col :span="8">
					<view class="box flex-center flex-column">
						<view class="value">80000</view>
						<view class="label">注册用户</view>
					</view>
				</van-col>
			</van-row>
			
			<view class="title1" :style="{ background: `url(${assetsPath}353b411ddc368191d26ccd3e165967a9f137b781.png) left top/100% 100% no-repeat` }">
				会员数据
			</view>
			
			<view class="dates text-center">
				<van-row>
					<van-col v-for="item in dates" :key="item.value" :span="6">
						<view class="date-item" :class="{ active: dateActive === item.value }">
							{{ item.label }}
						</view>
					</van-col>
				</van-row>
			</view>
			
			<view class="date-data">
				<van-row>
					<van-col :span="12">
						<view class="circle-wrapper flex-center text-center" :style="{ background: `url(${assetsPath}66373a83f6d1e35623e5318711eaa6ce3bffb8f9.png) left top/100% 100% no-repeat` }">
							<cCircle :size="88" :percent="50" animation :circleWidth="10" defaultColor="rgb(97,87,83)" circleColor="rgb(183,217,119)">
								<template #content>
									<view class="value">50%</view>
									<view class="label">会员转化率</view>
								</template>
							</cCircle>
						</view>
					</van-col>
					<van-col :span="12">
						<view class="flex-center flex-column" style="height: 248rpx; row-gap: 40rpx;">
							<view class="row">
								<text class="label">新增会员</text>
								<text class="value">1878</text>
							</view>
							<view class="row">
								<text class="label">新增用户</text>
								<text class="value">1878</text>
							</view>
							<view class="row">
								<text class="label">潜在用户</text>
								<text class="value">1878</text>
							</view>
						</view>
					</van-col>
				</van-row>
			</view>
		</view>
		
		<v-gap />
		
		<view class="title">新增会员曲线图</view>
		<qiun-data-charts type="tline" :opts="lineOpts" :chartData="lineChartData" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			assetsPath: this.$https.assetsPath,
			dates: [
				{ label: '今日', value: 'today' },
				{ label: '本周', value: 'week' },
				{ label: '本月', value: 'month' },
				{ label: '本年', value: 'year' },
			],
			dateActive: 'today',
			lineOpts: {
				color: ['rgb(99,93,247)'],
				legend: { 
					show: false
				},
				"xAxis": {
					axisLineColor: 'rgb(238,238,238)',
					fontColor: 'rgb(153,153,153)',
					gridColor: 'rgb(238,238,238)',
				},
				"yAxis": {
					gridColor: 'rgb(238,238,238)',
					data: [{
						fontColor: '#333',
						axisLineColor: 'rgb(238,238,238)'
					}],
				}
			},
			lineChartData: {
				categories: ['00:00', '01:00', '02:00', '03:00', '04:00'],
				series: [{
					name: "",
					data: [54, 36, 15, 83, 13],
					textColor: 'rgba(0,0,0,0)',
					pointShape: 'none'
				}]
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.member-analyse {
	padding-bottom: 40rpx;
	
	.module1 {
		padding: 20rpx 30rpx 32rpx;
		
		.box {
			box-shadow: 0px 0px 33.6rpx 1.4rpx rgba(0,0,0,0.1);
			border-radius: 16rpx;
			height: 220rpx;
		}
		
		.data-stat {
			.value {
				font-size: 40rpx;
				font-weight: 700;
				line-height: 30rpx;
			}
			
			.label {
				margin-top: 29rpx;
				color: rgb(136,136,136);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 22rpx;
			}
		}
		
		.title1 {
		    margin: 20rpx auto 10rpx;
		    padding: 13rpx 0 16rpx;
		    align-self: center;
		    color: rgb(255,255,255);
		    font-size: 28rpx;
		    font-weight: 700;
		    line-height: 27rpx;
		    width: 170rpx;
			text-align: center;
		}
		
		.dates {
			color: rgb(136,136,136);
			font-size: 28rpx;
			font-weight: 700;
			
			.date-item {
				padding: 20rpx 0;
			}
			
			.active {
				color: rgb(51,51,51);
			}
		}
		
		.date-data {
			margin-top: 20rpx;
			
			.circle-wrapper {
				width: 248rpx;
				height: 248rpx;
				margin: 0 auto;
				
				.value {
					color: rgb(139,127,118);
					font-size: 56rpx;
					font-weight: 700;
					line-height: 41rpx;
					text-shadow: 0.5rpx 0.86rpx rgba(250,245,239,0.53);
				}
				
				.label {
					margin-top: 15rpx;
					font-size: 25rpx;
					line-height: 24rpx;
				}
			}
			
			.row {
				.label {
					font-size: 28rpx;
				}
				
				.value {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 700;
				}
			}
		}
	}
	
	.title {
		font-size: 28rpx;
		font-weight: 700;
		padding: 30rpx;
	}
}
</style>
